<template>
  <div id="addFriend">
    <!-- <van-sticky style="background:#fff"> -->
      <div class="nav">
        <img :src="back" alt="" @click="handleBack"/>
        <div class="title">添加</div>
      </div>
    <!-- </van-sticky> -->
       <div class="info">
        <div>{{name}}</div>
        <div>{{phone}}</div>
      </div>
      <div class="check">
        <div class="img">
          <div class="imgBg">
                <img :src="relativesImg" alt="" width="60" height="60">
          </div>
          <div class="imgBg bg_r">
              <img :src="friendsImg" alt="" width="60" height="60">
          </div>
        </div>
        <van-radio-group v-model="relationType" direction="horizontal" class="radio" @change="handleChange">
          <van-radio :name="0" checked-color="rgba(242, 150, 0, 1)"></van-radio>
          <van-radio :name="1" checked-color="rgba(242, 150, 0, 1)"></van-radio>
        </van-radio-group>
        <div class="text">
          <div>亲友</div>
          <div>朋友</div>
        </div>
      </div>
      <div>
        
      </div>
      <div v-if="relationType == 0">
        <van-field
          v-model.trim="relation"
          name="亲友关系"
          label="亲友关系"
          placeholder="请输入或选择亲友关系"
          clearable
          maxlength="4"
          :rules="[{ required: true, message: '请输入关系' }]"
        />
        <div class="label">
              <div class="tags" >
              <div class="tag_content" :class="{ 'tag_active':relation ? activeIndex == index : 0 }" v-for="(item, index) in friendOptions" :key="index" @click="handleSelect(item,index)">
                <span>{{item.label}}</span>
              </div>
            </div>
        </div>
        <div class="tip">
          百合医支持把您的检测数据推送给亲友
        </div>
      </div>
      <van-button class="btn" :class="{ 'btns': isfriend  }"  block @click="handleAdd">确认添加</van-button>




  </div>
</template>

<script>
import {mapState} from "vuex";
import { friendList, saveByQRCode }  from '@/api/my'
export default {
    data(){
        return{
            back: require("@/assets/my/back.png"),
            relativesImg: require("@/assets/my/friend.png"),
            friendsImg: require("@/assets/my/user.png"),
            relationType:0,
            relation:'',
            friendOptions:[],
            activeIndex:null,
            isfriend:false,
            phone:'',
            name:'',
            userInfo:{},
            userId:''

        }
    },
    computed: {
    ...mapState(['userInfo']),
  },
    created(){
      this.name = !this.getParam("name") ? "" : decodeURIComponent(this.getParam("name"))
      this.phone = !this.getParam("phone") ? "" : decodeURIComponent(this.getParam("phone"))
      this.userId = !this.getParam("userId") ? "" : this.getParam("userId")
      this.getFriendLabel()
    },
    methods:{
       getParam(name) {
            if (window.location.hash.indexOf("?") != -1) {
                    const query = window.location.hash.split("?")[1];
                    const vars = query.split("&");
                    for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == name) {
                        return pair[1];
                    }
                    }
                } else {
                    return "";
            }

        },
        handleBack(){
            this.$router.go(-2)
        },
        handleSelect(item,index){
          this.relation =  item.label
          this.activeIndex = index
        },
        getFriendLabel(){
            friendList().then((response) => {
              const { data } = response;
              console.log(data)
              this.friendOptions = data
            })
        },
        handleChange(){
          
          if (this.relationType == 1) {
            this.isfriend = true
            this.relation = ''
          }else{
             this.isfriend = false
          }
        },
        handleAdd(){
          if (String(this.relationType) == 0) {
            if (this.relation) {
              // this.$toast(this.relation)
              this.saveFriend()
              
            }else{
              this.$toast('亲友关系不能为空')
            }
          }else{
            // this.$toast('添加为朋友')
            this.saveFriend()
          }
          
        },
        saveFriend(){
          const data = {
            friendLabel:this.relation ,
            friendType:this.relationType,
            friendUserId:this.userId,
            friendName:this.name
          }
          saveByQRCode(data).then((res) => {
            if (res) {
              this.$toast.success('添加成功')
            }
             this.handleBack()
             
          }).catch(()=>{

          })
        }
        
    }

}
</script>

<style lang="less" scoped>
#addFriend{
     height: 100vh;
    // padding: 0px 15px;
    text-align: center;
    
    .nav {
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      .title{
        font-size: 20px;
        font-weight: 500;
      }

    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
   
    }
    // .content{
      
    //     display: flex;
    //     flex-direction: column;
    //     justify-content: space-evenly;
    //     align-items: center;
    //     height: calc(100vh - 50px);
    .info{
        margin: 30px auto;
        font-size: 30px;
        font-weight: 500;
      div{
          padding: 5px;
      }
    }
    .check{
      display: flex;
      flex-direction: column;
      width: 80%;
      margin: 40px auto;
    }
    .van-field__label {
      font-size: 17px;
    }
    .img{
      display: flex;
      justify-content: space-around;
      .imgBg{
        background:  rgba(242, 150, 0, 1);
        border-radius: 50%;
        padding: 10px;
        
      }
      .bg_r{
        background:  rgba(153, 94, 0, 1);
        border-radius: 50%;
          
      }
    }
    .radio{
      display: flex;
      justify-content: space-around;
      top: -10px;
      position: relative;
      z-index: 999;
      /deep/.van-radio--horizontal {
          margin-right: 0;
      }
      /deep/.van-radio__icon .van-icon {
          background: #fff;
      }
    }
    .text{
      display: flex;
      justify-content: space-around;
      color: rgba(242, 150, 0, 1);
    }
    .label{
      width: 100%;
      margin: 0 auto;
      .tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .tag_content{
          // width: calc((100% - 0px) / 4);
          padding: 6px 20px;
          border: 1px solid #ccc;
          border-radius: 20px;
          font-size: 15px;
          color: #ccc;
          text-align: center;
          margin: 5px 8px;
        }
        .tag_active{
          padding: 6px 20px;
          border: 1px solid rgba(242, 150, 0, 1);
          border-radius: 20px;
          font-size: 15px;
          color: #fff;
          text-align: center;
          margin: 5px 8px;
          background: rgba(242, 150, 0, 1);
        }
        
      }
       
    }
    .tip{
      color: #ccc;
      font-size: 16px;
      margin: 20px auto;
    }
    .btn{
          font-size:20px;
          background:rgba(242, 150, 0, 1);
          color:#fff;
          border-radius:10px;
          text-align: center;
          margin: 40px auto;
          width: 90%;
    }
    .btns{
      // font-size:20px;
      // background:rgba(242, 150, 0, 1);
      // color:#fff;
      // border-radius:10px;
      // text-align: center;
      margin: 300px auto;
    }
    // }
    .content{
          display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: calc(100vh - 50px);
    }
    /deep/.van-field__label {
        font-size: 17px;
    }
    /deep/.van-field__control {
        font-size: 17px;
    }
   
   
   
       
  
}
</style>